今天是第 12 天,不知大家有沒有遇過,如果要引入文件的時候,有時候是用 require,有時候是用 import,像我就是在 Node.js 使用 require,Vue.js 是用 import。
同樣是引入,那這兩者有什麼差別呢?我想趁這個機會來簡單筆記一下,並分享給大家~~
2010 年前後,出生在野生規範,也就是 JavaScript 社群的開發者們自己擬定的規範,並且被大家廣泛地使用。遵循的是 CommonJS 規範,是為伺服器端開發設計的,而 Node.js 是 CommonJS 規範的實現。
CommonJS 規範是以同步的方式載入模組,換句話說,要載入完成後,才能執行後面的操作。
運行時動態加載,是為賦值的過程,把 require 的結果 ( String、Number、Function、Object 等 ) 輸出並賦值給某個變數。
輸出的是值的拷貝,
其中當輸出的是基本型別時,屬於值的拷貝;
當輸出的是物件型別時,屬於物件的淺拷貝。
CommonJS 默認 export 的是物件,即使輸出的是基本型別。
const file = require('file')
exports.file = file
module.exports = file
2015 年,為 ES6 Modules,在 ES6 新加進來的。
靜態編譯,在編譯過程中執行。
輸出的是值的引用。
不管是基本或是物件型別,都只能讀取引用。
如果遇到不支援 ES6 的情況下,就需要 webpacker + babel 來轉譯成 require/exports。
import file from 'file' // 引入只有一個模組且不具名的檔案,並重新賦予名稱(file)
import * from 'file' // 引入全部模組
import { default as file } from 'fs' // 引入 export default 的模組
import { * as file } from 'fs' // 全部引入並重新賦予名稱(file)
import { moduleName as file } from 'fs' // 引入名為 moduleName 的模組,並重新賦予名稱(file)
import { moduleName } from 'fs' // 引入名為 moduleName 的模組
import { moduleName1, moduleName2 } from 'fs' // 同時引入多個模組
export default file
export const moduleName
export function moduleName
export { moduleName1, moduleName2 }
export * from 'file'
今天比較匆忙(汗),如果有誤,敬請指教^^
參考資料:
require和import差異
js使用require 和 import 引入依賴的區別?
require,import區別?文章同步更新於 medium